<template>
  <div>
    <el-form
      ref="loginRef"
      :model="loginForm.data"
      :rules="rules"
      class="login-form"
    >
      <div class="Login" v-if="isShow">
        <div class="login-right">
          <div>
            <p class="small">Welcome to</p>
            <p class="big">D q 聊天室</p>
          </div>
        </div>
        <div class="login-left">
          <div class="content">
            <el-form-item prop="name" class="topName">
              <label for="name" class="iconfont icon-ziyuanxhdpi">
                临时名称</label
              >
              <input
                type="text"
                class="user"
                id="name"
                v-model="loginForm.data.name"
              />
            </el-form-item>

            <el-form-item prop="avatar">
              <div class="chooseAvatar">
                <label for="avatar" class="iconfont icon-icon26">
                  选择头像</label
                >
                <ul class="avatarWrap">
                  <li v-for="(item, index) in imgUrl" :key="item">
                    <img
                      :src="require('../assets/avatar/' + item)"
                      alt
                      @click="clickImg(index, item)"
                      :class="{ active: currentIndex === index ? true : false }"
                    />
                  </li>
                </ul>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button
                size="large"
                type="primary"
                class="button"
                @click="loginRoom"
                >登录</el-button
              >
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template> 
  <script setup>
import { reactive, ref } from "vue";
import userApi from "@/api/user/index";
import { useRouter } from "vue-router";
import { guid } from "@/utils/common";
import { useStore } from "vuex";

let imgUrl = ref([
  "one.jpg",
  "two.jpg",
  "three.jpeg",
  "four.jpg",
  "five.jpg",
  "six.jpg",
  "seven.jpg",
  "eight.jpg",
  "nine.jpg",
  "ten.jpeg",
]);

let loginForm = reactive({
  data: {
    name: "",
    avatar: "one.jpg", //默认头像
  },
});
//用户匿名头像选择
let currentIndex = ref(0);
let currentImg = ref("one.jpg");
let clickImg = (index, item) => {
  currentIndex.value = index;
  currentImg.value = item;
};

//登录模块
let loginRef = ref();
const router = useRouter();
const rules = reactive({
  name: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 1, max: 10, message: "用户名的长度1-10", trigger: "blur" },
  ],
});
// function
const store = useStore();
let loginRoom = () => {
  loginRef.value.validate((valid) => {
    //校验rules是否成功
    if (valid) {
      loginForm.data.avatar = currentImg.value;
      userApi.login(loginForm.data).then((response) => {
        if (response.success) {
          localStorage.setItem("token", guid());
          localStorage.setItem("user", JSON.stringify(loginForm.data));
          router.replace("/room");
        }
      });
    }
  });
};

//other TODO
let isShow = ref(true);
let user = ref(null);
let userList = ref([]);
let message = ref(null);
</script>

<style lang="less" scoped>
.topName {
  margin-top: 6px;
}
.Login {
  width: 600px;
  height: 360px;
  margin: 250px auto;
  display: flex;
  .login-right {
    width: 260px;
    height: 100%;
    background-color: rgba(66, 69, 120, 0.76);
    display: flex;
    justify-content: center;
    align-items: center;
    .small {
      color: #f1e9e9;
      font-size: 14px;
      font-family: sans-serif;
    }
    .big {
      font-size: 20px;
      font-weight: 600;
      margin-top: 5px;
      color: #f1e9e9;
      font-family: sans-serif;
    }
  }
  .login-left {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

    .icon-ziyuanxhdpi,
    .icon-icon26 {
      color: #353c73;
    }
    label {
      color: #000;
      font-size: 14px;
    }
    .content {
      margin: 20px auto;
      width: 90%;
      .user {
        width: 95%;
        border: 1px solid #ccc;
        font-size: 14px;
        line-height: 30px;
        padding-left: 10px;
        display: block;
      }

      .avatarWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        li {
          cursor: pointer;
          width: 50px;
          height: 50px;
          padding: 7px;
          img {
            width: 50px;
            height: 50px;
          }
          .active {
            border: 3px solid #2980b9;
          }
        }
      }
    }
    .button {
      width: 100px;
      line-height: 30px;
      background-color: #705a76;
      color: #fff;
      border-radius: 10px;
      margin-left: 34%;
    }
  }
}
</style>